import {fabric} from 'fabric'
import {base64ToImageData, blobToBase64, debounce, fileImport} from '@/util/file'
import {initControl} from "@/components/PicEdit/util";

let instance = null

class CanvasEditor {
    canvas = null
    ratio = null

    constructor(...args) {
        this.initCanvas(...args);
        initControl(fabric, this.ratio);
    }

    initCanvas(id, imageData) {
        const canvasBox = document.getElementById(id)
        const canvasContainer = document.getElementsByClassName('canvas')[0]
        // 内容画布
        const canvas = document.createElement('canvas')
        canvas.id = 'canvas-edit'
        canvas.width = imageData.width;
        canvas.height = imageData.height;
        const scaleValueY = canvasContainer.clientHeight / imageData.height
        this.ratio = scaleValueY
        // const scaleValueX = canvasContainer.clientWidth / imageData.width
        const translateY = (canvasContainer.clientHeight - canvasContainer.clientHeight * scaleValueY) / scaleValueY / 2
        canvasBox.style.transform = `scale(${scaleValueY}) translateY(-${translateY}px)`
        canvasBox.appendChild(canvas);
        this.canvas = new fabric.Canvas('canvas-edit');
    }
}

function getInstance(...args) {
    instance = new CanvasEditor(...args)
    return instance
}

export {
    instance,
    getInstance
}
